/** 
  实习需求报名详情
*/
<template>
  <div>
    <el-row type="flex" class="row-bg" justify="space-between">
      <div>
        <span @click="goBack" class="p_cals">{{$t('requirement.registration')}}</span> / <span>{{$t('requirement.details')}}</span>
      </div>
      <el-button @click="cancelDialog" type="text">{{$t('requirement.back')}}</el-button>
    </el-row>
    <p></p>
    <div >
      <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
        <el-row type="flex" class="row-bg" justify="space-between">
          <h2>{{$t('requirement.practice')}}</h2>
            
        </el-row>
        <hr style="border-top: 2px solid #eee;">
        <h3 style="margin-left:10px">{{$t('requirement.information')}}</h3>
      <table style="margin-left:10px"  class="table-style-baseinfo">
            <tr>
                <td class="text-right-background-color">{{$t('requirement.semester')}}:</td>
                <td class="text-left-background-none" colspan="3">{{dataForm.calendarName}}</td>
               
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('requirement.internship')}}:</td>
                <td class="text-left-background-none">{{dataForm.baseName}}</td>
                <td class="text-right-background-color">{{$t('requirement.namePost')}}:</td>
                <td class="text-left-background-none">{{dataForm.positionName}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('requirement.college')}}:</td>
                <td class="text-left-background-none">{{dataForm.collegeAcademy | collegeAcademyList(options.facultys)}}</td>
                <td class="text-right-background-color">{{$t('requirement.major')}}:</td>
                <td class="text-left-background-none">{{dataForm.major | collegeAcademy(options.degreeType)}}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{$t('requirement.demand')}}:</td>
              <td class="text-left-background-none"  >{{dataForm.personNum}}</td>
              <td class="text-right-background-color">{{$t('requirement.workplace')}}:</td>
              <td class="text-left-background-none"  >{{dataForm.workAddress}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color" >{{$t('requirement.treatment')}}:</td>
                <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">{{dataForm.treatment}}</td>
                <!-- <td class="text-right-background-color">{{$t('requirement.effectiveEnd')}}:</td>
                <td class="text-left-background-none">{{dataForm.competitionLevelName}}</td> -->
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('requirement.dateOperat')}}:</td>
                <td class="text-left-background-none">{{dataForm.workTimeStart}}</td>
                <td class="text-right-background-color">{{$t('requirement.workingDate')}}:</td>
                <td class="text-left-background-none">{{dataForm.workTimeEnd}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color" >{{$t('requirement.requirement')}}:</td>
                <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">{{dataForm.majorRequirements}}</td>
                <!-- <td class="text-right-background-color">{{$t('graduate.college')}}:</td>
                <td class="text-left-background-none">{{dataForm.awardLevel}}</td> -->
                
            </tr>
            <!-- <tr>
            <td class="text-left-background-none" colspan="4" ></td>
            </tr> -->
            <tr>
                <td class="text-right-background-color">{{$t('requirement.declarati')}}:</td>
                <td class="text-left-background-none" >{{dataForm.applyTimeStart}}</td>
                <td class="text-right-background-color">{{$t('requirement.reporti')}}:</td>
                <td class="text-left-background-none"  >{{dataForm.applyTimeEnd}}</td>
            </tr>
            <tr>
                <td class="text-right-background-color">{{$t('requirement.accessory')}}:</td>
                <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">
                  <!-- <p v-for="item in dataForm.fileList" :key="item.fileId"> -->
                    <a @click="download(dataForm.enclosureFileUrl)">{{dataForm.enclosureFileName}}</a>
                  <!-- </p> -->
                </td>
            </tr>
      </table>
      </el-card>
      <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
        <div class="title-container">
          <div class="audit-title">{{$t('internship.approvals')}}</div>
          <div v-if="!list">
            <el-button
              v-if="expand"
              type="text"
              icon="el-icon-arrow-up"
              @click="() => {this.showTable = false;this.expand = !expand}">{{$t('HistoryTable.Retract')}}</el-button>
              <el-button
                v-else
                type="text"
                icon="el-icon-arrow-down"
                @click="() => {this.showTable = true;this.expand = !expand}">{{$t('HistoryTable.Open')}}</el-button>
          </div>
        </div>
        <el-table tooltip-effect="light" v-show="showTable" stripe :data="tableData" ref="historyTable">
          <el-table-column
            :label="$t('internship.numerical')"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column :label="$t('HistoryTable.time')">
            <template slot-scope="props">{{props.row.time | formatDate}}</template>
          </el-table-column>
          <el-table-column :label="$t('internship.approver')" prop="approvorName"></el-table-column>
          <!-- <el-table-column :label="$t('internship.department')" prop="faculty"></el-table-column> -->
          <edu-table-column :label="$t('internship.department')" prop="faculty"></edu-table-column>
          <el-table-column :label="$t('graduate.operate')" prop="result">
            <template slot-scope="scope">
              <div class="is-enabled-container">
                <el-tag v-if="scope.row.result === 'COMMIT'" type="success" round>提交</el-tag>
                <el-tag v-if="scope.row.result === 'Process'" type="success" round>通过</el-tag>
                <el-tag v-if="scope.row.result === 'Reject'" type="danger" round>已驳回</el-tag>
                <el-tag v-if="scope.row.result === 'End'" type="info" round>已结束</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('internProgress.node')" prop="setpId">
            <template slot-scope="scope">
              <div class="is-enabled-container">
                <el-tag v-if="scope.row.setpId ==0" >提交</el-tag>
                <el-tag v-if="scope.row.setpId ==1" >学院审核</el-tag>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column :label="$t('internProgress.explain')" prop="content"></el-table-column> -->
          <edu-table-column :label="$t('internProgress.explain')" prop="content"></edu-table-column>
        </el-table>
      </el-card>
     
    </div>
    
    </div>
</template>
<script>
// import InnovationEntrepreneurshipPracticeApi from "common/src/api/innovative/InnovationEntrepreneurshipPractice";
import {downloadfile} from "common/src/api/upload";
import filters from "common/src/filters";
import HistoryTable from 'common/src/views/graduateStudent/component/HistoryTable';
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent';
export default {
  // props: {
  //   details: {
  //     type: String
  //   },
  //   showFlag: {
  //     type: Boolean,
  //     default: false
  //   },
  //   dataListProp: {
  //     type: Object
  //   }
  // },
  // components: {
  //   HistoryTable
  // },
  data() {
    return{
      queryForm: {}, //接收路由跳转的数据
      showTable: true,
      expand: true,
      internshipDemand: '',
      dataForm: {
        opinion: '',
        fileList: [],
        achievementId: '',
        studentId: '',
        practiceId: '',
        calendarId: ''
      }, //表格数据
      internship: {
        opinion: ''
      },
      curCheckStandard: '',
      curPracticeId: '',
      options: {
        facultys: [],
        degreeType: [],
        title: [],
        sex: [],
      },
      internshipRule: {
        opinion: [
            {
                required: true,
                message: this.$t('myExamine.reviewComments'),
                trigger: "blur"
            }
        ]
      },
      tableData: []
    }
  },
  filters: {
    collegeAcademyList(val, array) {
      let str = "";
      for (let item of array) {
        if (val === item.value) {
          str = item.label;
        }
      }
      return str;
    },
    collegeAcademy(val, array) {
      let list = [];
      let str = [];
      if (val) {
        list = val.split(',');
        list.forEach(el => {
          array.forEach(ele => {
            if (el == ele.value) {
              str.push(ele.label);
            }
          });
        });
        return str.join();
      }
    },
    formatDate(date) {
            return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
        }
  },
  watch: {
    showFlag: {
      handler: function(newV, oldV) {
        if (newV) {
          // console.log(this.$route.query.list, 'sdfg');
          // this.dataForm = this.$route.query.data;
          // this.tableData = this.$route.query.list;
          // if (this.dataProp === '编辑' || this.dataProp === '详情') {
          // }
        }
      }
    }
    // dataListProp
  },
  mounted() {
    this.getOptions();
  },
  created() {
    // this.dataForm = this.$route.query.data;
    // console.log(this.dataForm, 'this.dataForm');
    
    // this.tableData = this.$route.query.list;
    // console.log(this.$route.query, 'dataListProp');
    // this.dataForm = this.$route.query.row;
    this.assignment(this.$route.query.row.id);
    this.getActDetail(this.$route.query.row.actNo);
    
  },
  methods: {
    download (path) {
      downloadfile(path);
    },
    cancelDialog() {
      this.$store.commit("delete_tabs", this.$route.path);
      this.$router.go(-1);
    },
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ['X_YX', 'G_ZY']
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            facultys: "X_YX",
            degreeType: "G_ZY"
          },
          res.data,
          this.options
        );
        // console.log(this.options);
        
      });
    },
    goBack() {
      // this.$router.go(-1);
      this.$store.commit("delete_tabs", this.$route.path);
      this.$router.go(-1);
      // this.$router.push({
      //   path: '/settingInternship',
      //   query: this.$route.query
      // });
      // this.$emit('goBack');
      // this.$emit('cancel-dialog', false);
    },
    // 获取表格数据
    assignment(id) {
      graduateStudent.pgetDetailNeeds(id).then(res => {
        // console.log(res);
        this.dataForm = res.data;
      });
    },
    getActDetail(id) {
      graduateStudent.getActDetailNeeds(id).then(res => {
        // console.log(res);
        this.tableData = res.data;
      });
    },
  },
}
</script>
<style scoped>

.p_cals:hover{
  cursor: pointer;
  color: #409eff;
}
.p_cals{
  color: #aaa
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.card-margin {
  .title-container {
    display: flex;
    align-items: center;
    .audit-title {
      font-size: 16px;
    }
  }
}
.inner-breadcrumb {
    .breadcrumb {
        span {
            font-weight: normal;
            color: #aaa;
        }
        a {
            font-weight: normal;
            color: #aaa;
        }
        a:hover {
            color: #409eff;
        }
        .last {
            font-weight: bold !important;
            cursor: default !important;
        }
        .disable {
            cursor: default !important;
        }
    }
}
.condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
}
.base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
}
.table-style-baseinfo {
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}
.table-style-baseinfo td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}
.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}
.text-left-background-none {
    text-align: left;
}
</style>